<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
        <link rel="stylesheet" type="text/css" href="../css/index.css" />
        <!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<script src="../js/mui.min.js"></script>
		<style>
		.mui-icon-extra{font-size: 24px; display: block; margin-top: 5px; line-height: 18px;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-table-view" style="box-shadow:none; border: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">北方图书城</h1>
			<a id='showUserPicker' class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<div style="width: 100%; padding: 4%; background-color: #FFFFFF; text-align: center;">
			<div>今日福利</div>
			<div>/ 专享福利  天天优惠  /</div>
		</div>
         
		<!--第二块图片-->
		<div style="width: 98%; margin: 3% auto; padding: 2%;">
			 <div style="position: relative;">
			 	<div><a href=""><img src="../images/youhui-bg.png" class="you-img"></a></div>
			 	<div class="youjuan-one" style="width:80%; position: absolute;">			 		
					<a href="javascript:;">
						<img  src="../images/book.jpg" class="youhui-book" style="float: left;">
						<div style="float: left; margin-left: 2%; padding: 1% 1%;">
							<p class="you-p1">仅可购买部分计算机类书籍</p>
							<p class="you-p2">烤炉模式的城</p>
						</div>
					</a>
			 	</div>
			 </div>
		</div>
		<div style="width: 98%; margin: 20% auto; padding: 2%;">
			 <div style="position: relative;">
			 	<div><a href=""><img src="../images/youhui-bg.png" class="you-img"></a></div>
			 	<div class="youjuan-one" style="width:80%; position: absolute;">			 		
					<a href="javascript:;">
						<img  src="../images/book.jpg" class="youhui-book" style="float: left;">
						<div style="float: left; margin-left: 2%; padding: 1% 1%;">
							<p class="you-p1">仅可购买部分计算机类书籍</p>
							<p class="you-p2">烤炉模式的城</p>
						</div>
					</a>
			 	</div>
			 </div>
		</div>
		<div style="width: 98%; margin: 20% auto; padding: 2%;">
			 <div style="position: relative;">
			 	<div><a href=""><img src="../images/youhui-bg.png" class="you-img"></a></div>
			 	<div class="youjuan-one" style="width:80%; position: absolute;">			 		
					<a href="javascript:;">
						<img  src="../images/book.jpg" class="youhui-book" style="float: left;">
						<div style="float: left; margin-left: 2%; padding: 1% 1%;">
							<p class="you-p1">仅可购买部分计算机类书籍</p>
							<p class="you-p2">烤炉模式的城</p>
						</div>
					</a>
			 	</div>
			 </div>
		</div>
		<div style="width: 98%; margin: 20% auto; padding: 2%;">
			 <div style="position: relative;">
			 	<div><a href=""><img src="../images/youhui-bg.png" class="you-img"></a></div>
			 	<div class="youjuan-one" style="width:80%; position: absolute;">			 		
					<a href="javascript:;">
						<img  src="../images/book.jpg" class="youhui-book" style="float: left;">
						<div style="float: left; margin-left: 2%; padding: 1% 1%;">
							<p class="you-p1">仅可购买部分计算机类书籍</p>
							<p class="you-p2">烤炉模式的城</p>
						</div>
					</a>
			 	</div>
			 </div>
		</div>
		<div style="width: 98%; margin: 20% auto; padding: 2%;">
			 <div style="position: relative;">
			 	<div><a href=""><img src="../images/youhui-bg.png" class="you-img"></a></div>
			 	<div class="youjuan-one" style="width:80%; position: absolute;">			 		
					<a href="javascript:;">
						<img  src="../images/book.jpg" class="youhui-book" style="float: left;">
						<div style="float: left; margin-left: 2%; padding: 1% 1%;">
							<p class="you-p1">仅可购买部分计算机类书籍</p>
							<p class="you-p2">烤炉模式的城</p>
						</div>
					</a>
			 	</div>
			 </div>
		</div>
		<div style="width: 98%; margin: 20% auto; padding: 2%;">
			 <div style="position: relative;">
			 	<div><a href=""><img src="../images/youhui-bg.png" class="you-img"></a></div>
			 	<div class="youjuan-one" style="width:80%; position: absolute;">			 		
					<a href="javascript:;">
						<img  src="../images/book.jpg" class="youhui-book" style="float: left;">
						<div style="float: left; margin-left: 2%; padding: 1% 1%;">
							<p class="you-p1">仅可购买部分计算机类书籍</p>
							<p class="you-p2">烤炉模式的城</p>
						</div>
					</a>
			 	</div>
			 </div>
		</div>

	</body>

</html>